<template>
  <action-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    permission="system:role:editPermission"
  >
    <a-tree
      v-model="checkedKeys"
      checkable
      checkStrictly
      :auto-expand-parent="autoExpandParent"
      :tree-data="treeData"
      :replaceFields="replaceFields"
      @check="handleSelect"
    />
  </action-modal>
</template>

<script>
import { editRolePermissionById } from '@/api/system/role'
import { getMenuMap, getMenuByRoleId } from '@/api/system/menu'
import CommonForm from '@/components/CommonForm'
import { defaultStoreData } from '@/views/dashboard/EditDashboard/LowCode/lib/const'

const formData = {
  name: '',
  parentId: undefined,
  show: 1,
  path: '',
}
export default {
  components: {
    CommonForm,
  },
  data() {
    return {
      visible: false,
      formData: {
        ...formData,
      },
      title: '菜单权限',
      checkedKeys: [],
      autoExpandParent: true,
      treeData: [],
      replaceFields: { children: 'children', title: 'name', key: 'id' },
    }
  },
  computed: {},
  mounted() {
    this.getMenuMap()
  },
  methods: {
    handleOk() {
      const ids = this.checkedKeys.join(',')
      editRolePermissionById({
        ids,
        roleId: this.formData.id,
      }).then(() => {
        console.log(this)
        this.$message.success('修改成功')
        this.handleCancel()
      })
    },
    handleCancel() {
      this.visible = false
      this.formData = {
        ...formData,
      }
      this.$emit('update')
    },
    show(val = {}) {
      // this.getData(val.id)
      this.formData = {
        ...val,
      }
      this.checkedKeys = val.menuIds.split(',').map((str) => Number(str))
      this.visible = true
    },
    handleSelect(selectedKeys) {
      this.checkedKeys = [...selectedKeys.checked]
    },
    getMenuMap() {
      getMenuMap().then((data) => {
        this.treeData = [...data]
      })
    },
    // getData(id) {
    //   getMenuByRoleId({id})
    //   .then(data => {
    //     this.checkedKeys = [...data]
    //   })
    // }
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
